<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Booom!</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- The main CSS file -->
        <link href="css/main.css" rel="stylesheet">

        <!-- CSS file for your custom modifications -->
        <link href="css/custom.css" rel="stylesheet">

        <link rel="shortcut icon" href="images/favicon.ico">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
        <![endif]-->
    </head>
  
    
    <!-- Scrollspy set in the body -->
    <body id="home" data-spy="scroll" data-target=".main-nav" data-offset="73">

    <!--///////////////////////////////////////// PARALLAX BACKGROUND ////////////////////////////////////////-->

    <!-- image is set in the CSS as a background image -->
    <div id="parallax"></div>

    <!--///////////////////////////////////////// end PARALLAX BACKGROUND ////////////////////////////////////////-->


    
    <!--/////////////////////////////////////// NAVIGATION BAR ////////////////////////////////////////-->

    <section id="header">

        <nav class="navbar navbar-fixed-top" role="navigation">

            <div class="navbar-inner">
                <div class="container">

                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="#navigation"></button>

                    <!-- Logo goes here - replace the image with your -->
                    <a href="index.html" class="navbar-brand"><img class="logo-img" src="images/logo.png" alt="Booom! Logo"></a>


                    <div class="collapse navbar-collapse main-nav" id="navigation">


                        <ul class="nav pull-right">

                            <!-- Menu items go here -->
                            
                            <li><a href="index.html">&larr; Back to Home</a></li>
        
                            <!-- If you want sub-menu items, do them like this
                            <li>
                                <ul>
                                  <li><a href="#">Item 1</a></li>
                                  <li><a href="#">Item 2</a></li>
                                </ul>
                            </li> 
                            You just need to delete these comment lines -->
                        </ul>

                    </div><!-- /nav-collapse -->
                </div><!-- /container -->
            </div><!-- /navbar-inner -->
        </nav>

    </section>

    <!--//////////////////////////////////////// end NAVIGATION BAR ////////////////////////////////////////-->

    

    <!--/////////////////////////////////////// BLOG SECTION ////////////////////////////////////////-->

    <section id="blog">

        <div class="container">

            <header>
                <h1>Welcome to the Blog.</h1>
                <p class="lead">Example with small image thumbnails</p>
            </header>

            <hr>

            <div class="row blog-layout">
                
                <!--/// MAIN COLUMN ///-->
                <div class="col-md-8 main-column">
                    
                    <!--/// BLOG ITEM 1 ///-->
                    <div class="blog-item">
                        <div class="row">
                            <div class="col-sm-4">
                                <a href="blog-single.html"><img src="http://www.placehold.it/400x400" alt="featured-image" class="img-responsive featured-image hover"></a>
                            </div>
                            <div class="col-sm-8">
                                <a href="blog-single.html" class="blog-title">Lorem ipsum dolor sit amet</a>
                                <div class="blog-meta">
                                    <a href="#"><span class="label label-default"><span class="fui-user"></span> admin</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-calendar"></span> 5th November 2013, 2:35PM</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-chat"></span> 4 comments</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-arrow-right"></span> news</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-arrow-right"></span> announcements</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-tag"></span> tag 1</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-tag"></span> tag 2</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-tag"></span> another tag</span></a>
                                </div>
                                    
                                <p class="blog-teaser">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, consectetur, nostrum accusamus nam asperiores nesciunt aperiam placeat animi fuga voluptatibus quo ipsam mollitia ut? Cum aperiam architecto distinctio deleniti dolorum.</p>
                                <a href="blog-single.html" class="blog-link btn btn-lg btn-embossed btn-primary">Read More &raquo;</a>
                            </div>
                        </div>
                        
                    </div>


                    <!--/// BLOG ITEM 1 ///-->
                    <div class="blog-item">
                        <div class="row">
                            <div class="col-sm-4">
                                <a href="blog-single.html"><img src="http://www.placehold.it/400x400" alt="featured-image" class="img-responsive featured-image hover"></a>
                            </div>
                            <div class="col-sm-8">
                                <a href="blog-single.html" class="blog-title">Lorem ipsum dolor sit amet</a>
                                <div class="blog-meta">
                                    <a href="#"><span class="label label-default"><span class="fui-user"></span> admin</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-calendar"></span> 5th November 2013, 2:35PM</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-chat"></span> 4 comments</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-arrow-right"></span> news</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-arrow-right"></span> announcements</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-tag"></span> tag 1</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-tag"></span> tag 2</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-tag"></span> another tag</span></a>
                                </div>
                                    
                                <p class="blog-teaser">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, consectetur, nostrum accusamus nam asperiores nesciunt aperiam placeat animi fuga voluptatibus quo ipsam mollitia ut? Cum aperiam architecto distinctio deleniti dolorum.</p>
                                <a href="blog-single.html" class="blog-link btn btn-lg btn-embossed btn-primary">Read More &raquo;</a>
                            </div>
                        </div>
                        
                    </div>


                    <!--/// BLOG ITEM 1 ///-->
                    <div class="blog-item">
                        <div class="row">
                            <div class="col-sm-4">
                                <a href="blog-single.html"><img src="http://www.placehold.it/400x400" alt="featured-image" class="img-responsive featured-image hover"></a>
                            </div>
                            <div class="col-sm-8">
                                <a href="blog-single.html" class="blog-title">Lorem ipsum dolor sit amet</a>
                                <div class="blog-meta">
                                    <a href="#"><span class="label label-default"><span class="fui-user"></span> admin</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-calendar"></span> 5th November 2013, 2:35PM</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-chat"></span> 4 comments</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-arrow-right"></span> news</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-arrow-right"></span> announcements</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-tag"></span> tag 1</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-tag"></span> tag 2</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-tag"></span> another tag</span></a>
                                </div>
                                    
                                <p class="blog-teaser">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, consectetur, nostrum accusamus nam asperiores nesciunt aperiam placeat animi fuga voluptatibus quo ipsam mollitia ut? Cum aperiam architecto distinctio deleniti dolorum.</p>
                                <a href="blog-single.html" class="blog-link btn btn-lg btn-embossed btn-primary">Read More &raquo;</a>
                            </div>
                        </div>
                        
                    </div>


                    <!--/// BLOG ITEM 1 ///-->
                    <div class="blog-item">
                        <div class="row">
                            <div class="col-sm-4">
                                <a href="blog-single.html"><img src="http://www.placehold.it/400x400" alt="featured-image" class="img-responsive featured-image hover"></a>
                            </div>
                            <div class="col-sm-8">
                                <a href="blog-single.html" class="blog-title">Lorem ipsum dolor sit amet</a>
                                <div class="blog-meta">
                                    <a href="#"><span class="label label-default"><span class="fui-user"></span> admin</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-calendar"></span> 5th November 2013, 2:35PM</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-chat"></span> 4 comments</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-arrow-right"></span> news</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-arrow-right"></span> announcements</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-tag"></span> tag 1</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-tag"></span> tag 2</span></a>
                                    <a href="#"><span class="label label-default"><span class="fui-tag"></span> another tag</span></a>
                                </div>
                                    
                                <p class="blog-teaser">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, consectetur, nostrum accusamus nam asperiores nesciunt aperiam placeat animi fuga voluptatibus quo ipsam mollitia ut? Cum aperiam architecto distinctio deleniti dolorum.</p>
                                <a href="blog-single.html" class="blog-link btn btn-lg btn-embossed btn-primary">Read More &raquo;</a>
                            </div>
                        </div>
                        
                    </div>


                    <!--/// PAGINATION ///-->
                    <div class="pagination pagination-minimal">
                        <ul>
                            <li class="previous">
                                <a href="#" class="fui-arrow-left"></a>
                            </li>
                               
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                               
                            <li class="next">
                                <a href="#" class="fui-arrow-right"></a>
                            </li>
                        </ul>
                    </div>


                </div>


                <!--/// SIDEBAR ///-->
                <div class="col-md-3 sidebar">
                    
                    <div class="widget">
                        <div class="widget-title">Categories</div>  
                        <ul>
                            <li><a href="#">Category 1</a></li>
                            <li><a href="#">Category 2</a></li>
                            <li><a href="#">Category 3</a></li>
                            <li><a href="#">Category 4</a></li>
                            <li><a href="#">Category 5</a></li>
                        </ul>          
                    </div>
                    
                    <div class="widget">
                        <div class="widget-title">Tags</div>  
                        <span class="label label-default"><span class="fui-tag"></span> tag 1</span>
                        <span class="label label-default"><span class="fui-tag"></span> tag 2</span>
                        <span class="label label-default"><span class="fui-tag"></span> another tag</span>
                        <span class="label label-default"><span class="fui-tag"></span> add</span>
                        <span class="label label-default"><span class="fui-tag"></span> as many</span>
                        <span class="label label-default"><span class="fui-tag"></span> as you want</span>
                        <span class="label label-default"><span class="fui-tag"></span> why not</span>                        
                    </div>                    
                </div>

            </div><!-- /row -->
        </div><!-- /container -->

    </section>

    <!--/////////////////////////////////////// end FEATURES SECTION ////////////////////////////////////////-->



    <!--//////////////////////////////////////// TWITTER SECTION ////////////////////////////////////////-->

    <section id="twitter">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 text-center">
                    <img src="images/icons/chat.svg" alt="" />
                    <p class="lead"><span id="tweets-feed" class="lead"></span></p>
                </div>
            </div>
        </div>
    </section>

    <!--//////////////////////////////////////// TWITTER SECTION ////////////////////////////////////////-->



    <!--//////////////////////////////////////// FOOTER SECTION ////////////////////////////////////////-->
    <section id="footer">
        <div class="bottom-menu-inverse">

            <div class="container">

                <div class="row">
                    <div class="col-md-6">
                        <p>Copyright &copy; 2013 Booom! Designed by <a href="http://www.simonswiss.com" target="_blank">simonswiss</a>.</p>
                    </div>

                    <div class="col-md-6 social">
                        <ul class="bottom-icons">
                            <li>
                              <a href="#" class="fui-facebook"></a>
                            </li>
                             <li>
                              <a href="#" class="fui-twitter"></a>
                            </li>
                             <li>
                              <a href="#" class="fui-pinterest"></a>
                            </li>
                             <li>
                              <a href="#" class="fui-googleplus"></a>
                            </li>
                             <li>
                              <a href="#" class="fui-dribbble"></a>
                            </li>
                             <li>
                              <a href="#" class="fui-vimeo"></a>
                            </li>
                          </ul>                      
                    </div>
                </div>
            
            </div><!-- /row -->
        </div><!-- /container -->

    </section>

    <!--//////////////////////////////////////// end FOOTER SECTION ////////////////////////////////////////-->



    <!--//////////////////////////////////////// JAVASCRIPT LOAD ////////////////////////////////////////-->

    <!-- Feel free to remove the scripts you are not going to use -->
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/jquery.magnific-popup.js"></script>
    <script src="js/jquery.fitvids.min.js"></script>
    <script src="assets/twitter/jquery.tweet.js"></script>
    <script src="js/bootstrap-select.js"></script>
    <script src="js/bootstrap-switch.js"></script>
    <script src="js/flatui-checkbox.js"></script>
    <script src="js/flatui-radio.js"></script>
    <script src="js/jquery.tagsinput.js"></script>
    <script src="js/jquery.placeholder.js"></script>
    <script src="js/custom.js"></script>

    <!--//////////////////////////////////////// end JAVASCRIPT LOAD ////////////////////////////////////////-->

  </body>
</html>
